<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1.基本列表</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- 数组集合遍历 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(person,index) in personList" :key="person.id">
                {{person.name}} -- {{person.age}} -- {{index}}
            </li>
        </ul>
        <hr>
        <!-- 对象遍历 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) in car" :key="k">
                {{k}} --- {{value}}
            </li>
        </ul>

        <hr>
        <!-- 字符串遍历 -->
        <h2>字符串遍历</h2>
        <ul>
            <li v-for="(value,index) in tetStr" :key="index">
                {{index}} --- {{value}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    personList: [
                        { id: '001', name: '张三', age: 18 },
                        { id: '002', name: '李四', age: 19 },
                        { id: '003', name: '王五', age: 20 },
                    ],
                    car: {
                        color: 'red',
                        name: 'Chery',
                        price: '$14.5'
                    },
                    tetStr: 'test110'
                }
            },
        });
    </script>

</body>

</html>